<template>
	<view class="container">
		<view class="section">
			<view class="section-title">订单信息</view>
			<view class="info-item">
				<text class="info-label">订单号：</text>
				<text class="info-value">{{ order.orderId }}</text>
				<text class="info-status">{{ order.status }}</text>
			</view>
			<view class="info-item">
				<text class="info-label">服务项目：</text>
				<text class="info-value">{{ order.service }}</text>
			</view>
			<view class="info-item">
				<text class="info-label">下单时间：</text>
				<text class="info-value">{{ order.orderTime }}</text>
			</view>
			<view class="info-item">
				<text class="info-label">预约时间：</text>
				<text class="info-value">{{ order.appointmentTime }}</text>
			</view>
			<view class="info-item">
				<text class="info-label">车辆：</text>
				<text class="info-value">{{ order.car }}</text>
			</view>
			<view class="info-item">
				<text class="info-label">备注：</text>
				<text class="info-value">{{ order.note }}</text>
			</view>
		</view>

		<view class="section">
			<text class="section-title">订单详情</text>
			<view class="detail-item">
				<text class="detail-label">车辆精洗</text>
				<text class="detail-value">￥199</text>
			</view>
			<view class="detail-item">
				<text class="detail-label">车辆附加费用</text>
				<text class="detail-value">￥199</text>
			</view>
			<view class="detail-item">
				<text class="detail-label">原价</text>
				<text class="detail-value">￥100</text>
			</view>
			<view class="detail-item">
				<text class="detail-label">优惠</text>
				<text class="detail-value" style="color: red;">-￥10</text>
			</view>
			<view class="detail-item">
				<text class="detail-label">实付金额</text>
				<text class="detail-value" style="color: black;">￥200</text>
			</view>
		</view>

		<view class="section">
			<text class="section-title">评价结果</text>
			<view class="evaluation-item">
				<text class="evaluation-label">评价时间：</text>
				<text class="evaluation-value">{{ evaluation.evaluationTime }}</text>
			</view>
			<view class="evaluation-item">
				<text class="evaluation-label">评价结果：</text>
				<view class="stars">
					<uni-icons type="star" size="24" color="#ffcc00" v-for="filled in filledStars"
						:key="filled"></uni-icons>
					<uni-icons type="star" size="24" color="#cccccc" v-for="empty in emptyStars"
						:key="empty"></uni-icons>
				</view>
			</view>
			<view class="evaluation-item">
				<text class="evaluation-label">评语：</text>
				<text class="evaluation-value">{{ evaluation.comment }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from "vue";
	import uniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";

	const order = ref({
		orderId: "121212112487878",
		status: "已完成",
		service: "车辆保养",
		orderTime: "2020.01.08 17:40",
		appointmentTime: "2020.01.08 17:40",
		car: "奔驰FWE 4/豫A98FHJ",
		note: "",
	});

	const evaluation = ref({
		evaluationTime: "2022-10-10 11:09",
		rating: 3,
		comment: "评语评语评语评语评语评语评语评语评语评语评语评语",
	});

	const filledStars = computed(() => {
		return Array.from({
			length: evaluation.value.rating
		}, (_, index) => index);
	});

	const emptyStars = computed(() => {
		return Array.from({
			length: 5 - evaluation.value.rating
		}, (_, index) => index);
	});
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		/* padding: 20rpx; */
		background-color: #fff;
	}

	.section {
		background-color: #ffffff;
		padding: 30rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 2, 10, 0.2);

	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 30rpx;
		/* line-height: 40rpx; */
	}

	.info-item {
		display: flex;
		margin-bottom: 20rpx;
		color: black;
		font-weight: 550;
		padding-right: 30rpx;
	}

	.info-label {
		font-size: 28rpx;
		color: black;
		margin-right: 10rpx;

	}

	.info-value {
		font-size: 28rpx;
		flex: 1;
	}

	.info-status {
		font-size: 28rpx;
		font-weight: 550;
		color: #ff0000;
		margin-left: 10rpx;
	}

	.detail-item {
		padding-top: 30rpx;
		padding-right: 30rpx;
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
		font-weight: 550;
		color: black;
		font-size: 30rpx;
	}

	.detail-label {
		font-size: 28rpx;
		color: #333333;
	}

	.detail-value {
		font-size: 28rpx;
		color: #666666;
		font-weight: 900;
	}

	.evaluation-item {
		padding-right: 30rpx;
		display: flex;
		margin-bottom: 20rpx;
		font-size: 34rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 30rpx;
	}

	.evaluation-label {
		padding-top: 30rpx;
		font-size: 28rpx;
		color: #333333;
		margin-right: 10rpx;
	}

	.evaluation-value {
		padding-top: 30rpx;
		font-size: 28rpx;
		color: #666666;
		flex: 1;
	}

	.stars {
		padding-top: 20rpx;
		display: flex;
	}
</style>